<!-- 审批流程 -->
<template>
  <section class="flow-approve-box">
    <!-- 检索条件 -->
    <div class="flow-content">
      <div class="search-box">
        <div class="search-segment" style="flex: 1">
          <!-- <a-input v-model="query.name" :max-length="16" allow-clear long placeholder="流程名称" /> -->
          <a-input-search v-model="query.name" :max-length="16" allow-clear placeholder="流程名称" search-button
            :button-props="{ type: 'secondary' }" @press-enter="onSearch()" @search="onSearch()">
            <template #button-icon><icon-search /></template>
          </a-input-search>
        </div>
        <!-- <div class="search-segment">
          <a-tooltip content="搜索">
            <a-button @click="onSearch()"> <icon-search /> </a-button>
          </a-tooltip>
        </div> -->
        <div class="search-segment">
          <a-tooltip content="重置">
            <a-button @click="onSearchReset()"> <icon-refresh /> </a-button>
          </a-tooltip>
        </div>
        <div class="search-segment">
          <a-popover position="rt" trigger="click" :show-arrow="false" class="flow-search-more-popover"
            animation-name="slide-fade">
            <a-button> <icon-filter /> </a-button>
            <template #content>
              <!-- 更多检索条件 -->
              <div class="search-more-title">高级筛选</div>
              <div class="search-more-box">
                <a-select v-model:model-value="query.initiatorId" allow-clear allow-search placeholder="发起人">
                  <a-option v-for="user in users" :value="user.id" :label="user.name" />
                </a-select>
                <a-select class="column" v-model:model-value="query.groupId" allow-clear placeholder="流程分组">
                  <a-option v-for="group in groups" :value="group.id" :label="group.name" />
                </a-select>
                <a-range-picker v-model:model-value="flowBeginTime" :placeholder="['最小提交时间', '最大提交时间']" allow-clear
                  format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="onBeginTimeChanged" />
              </div>
              <div class="search-more-action">
                <a-button @click="onSearchReset()"> 重置 </a-button>
                <a-button type="primary" @click="onSearch()"> 检索 </a-button>
              </div>
            </template>
          </a-popover>
        </div>
      </div>

      <!-- 流程列表 -->
      <div class="flow-list-box">
        <div class="empty-box" v-if="flowInsts.length == 0">
          <a-empty></a-empty>
        </div>
        <div v-else :class="['item-box', selectedFlow.id == inst.id ? 'item-box-choosed' : '']"
          v-for="inst in flowInsts" @click="onFlowInstClicked(inst)">
          <FlowCard :flow-inst="inst"></FlowCard>
        </div>
        <RollLoading @on-scroll="loadFlowInsts()" :has-more="haveMore"></RollLoading>
      </div>
    </div>

    <!-- 流程详情 -->
    <div class="flow-detail-content">
      <flow-detail v-model:flow-inst="selectedFlow" :cancelable="false" :actionable="true" :editable="true"
        @onRemove="onHandleCallback" />
    </div>
  </section>
</template>

<script setup>
import { ref, computed, onBeforeMount } from "vue";
import { useOrganStore } from "@/stores";
import FlowManApi from "@/api/FlowManApi";
import FlowInstApi from "@/api/FlowInstApi";
import OrganApi from "@/api/OrganApi";
import FlowDetail from "./flow-detail.vue";
import ArrayUtil from "@/components/flow/common/ArrayUtil";
import { IconSearch, IconRefresh, IconFilter } from "@arco-design/web-vue/es/icon";
import FlowCard from "./flow-card.vue";

import RollLoading from "@/components/common/RollLoading.vue";

let organStore = useOrganStore();
let users = computed(() => organStore.users);
let groups = ref([]);

let query = ref({ page: 0, size: 10, total: 0 });
let flowInsts = ref([]);
let flowBeginTime = ref([]);
let flowEndTime = ref([]);
let selectedFlow = ref({});
const haveMore = ref(true); // 无限加载, 是否存在更多的数据

const onBeginTimeChanged = (dateString) => {
  if (dateString && dateString.length == 2) {
    query.value.beginMinTime = dateString[0];
    query.value.beginMaxTime = dateString[1];
  } else {
    delete query.value.beginMinTime;
    delete query.value.beginMaxTime;
  }
};

const onSearch = () => {
  query.value.page = 0;
  flowInsts.value = [];
  haveMore.value = true;
};

const onSearchReset = () => {
  query.value = { page: 0, size: 10, total: 0 };
  flowBeginTime.value = null;
  flowEndTime.value = null;
  flowInsts.value = [];
  haveMore.value = true;
};

const loadFlowInsts = () => {
  query.value.page++;
  FlowInstApi.listTasks(query.value).then((resp) => {
    if (resp.code == 1) {
      let { data, total } = resp;
      flowInsts.value.push(...(data || []));
      query.value.total = total || 0;
      if (flowInsts.value.length >= total) {
        haveMore.value = false;
      }
    }
  });
};

const onFlowInstClicked = (inst) => {
  selectedFlow.value = inst;
};

const onHandleCallback = () => {
  ArrayUtil.remove(flowInsts.value, "id", selectedFlow.value.id);
  selectedFlow.value = {};
};

const loadFlowGroups = () => {
  FlowManApi.listGroups().then((resp) => {
    if (resp.code == 1) {
      groups.value = resp.data || [];
    }
  });
};

onBeforeMount(() => {
  OrganApi.loadOrgan();
  loadFlowGroups();
  flowInsts.value = [
    {
      id:'0000000080a826380180b6905c0e202a',
      name: '知识产权审核',
      beginTime: '2023-05-01 12:00:16',
      summary: { '名称': '一种基于内摆线啮合原理的用于油井的减速机','第一作者':'孟碧霞'},
      initiatorId:10086,
      status:1
    },
    {
      id:'0000000080a826380180b7a58e8a4013',
      name: '知识产权审核',
      beginTime: '2023-05-01 12:00:26',
      summary: { '名称': '具有井眼清洁作用的加重钻杆','第一作者':'李银朋'},
      initiatorId:10086,
      status:1
    },
    {
      id:'0000000080a826380180b7a58e8a4043',
      name: '知识产权审核',
      beginTime: '2023-05-01 12:00:56',
      summary: { '名称': '一种共享设备产品市场预测系统及方法','第一作者':'齐博'},
      initiatorId:10086,
      status:1
    },
    {
      id:'0000000080a826380180b7a58e8a4043',
      name: '知识产权审核',
      beginTime: '2023-05-01 12:06:21',
      summary: { '名称': '一种地震原始数据信噪比定量分析评价方法','第一作者':'冯子明'},
      initiatorId:10086,
      status:1
    },
    {
      id:'0000000080a826380180b7a58e8a4043',
      name: '知识产权审核',
      beginTime: '2023-05-01 12:08:56',
      summary: { '名称': '一种用于有杆泵井的扰流刮蜡螺杆装置','第一作者':'冯子明'},
      initiatorId:10086,
      status:1
    }
  ]
});
</script>

<style lang="less">
@import "./flow-base.less";
</style>
